<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import notfound from '@/assets/notfound.svg'
import GoodsCard from '../goods/components/GoodsCard.vue'
import { useGoodsStore } from '@/stores'
import ReturnButton from '@/components/ReturnButton.vue'

const goodsStore = useGoodsStore()

const route = useRoute()
const filterGoodsList = ref([])

watch(
  () => route.query,
  () => {
    filterGoodsList.value = goodsStore.goodsList.filter(goods =>
      goods.name.includes(route.query.name)
    )
  },
  {
    immediate: true
  }
)
</script>

<template>
  <ReturnButton class="btn" v-if="filterGoodsList.length" />
  <div v-if="filterGoodsList.length" class="goods-list">
    <GoodsCard v-for="goods in filterGoodsList" :key="goods.id" :goods />
  </div>
  <div v-else class="tip">
    <img :src="notfound" />
    <p>没有找到相关服装，<router-link class="home" to="/">返回主页</router-link></p>
  </div>
</template>

<style scoped lang="scss">
.btn {
  margin: 20px 0 0 80px;
}

.goods-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: center;
  gap: 10px;
  padding: 20px;
}

.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;

  img {
    width: 300px;
  }

  p {
    font-size: 18px;
    margin-top: 20px;
  }

  .home {
    color: var(--theme-font-color);
  }
}
</style>
